<style lang="less">
    @import "roleManage.less";
</style>
<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row class="operation">
                        <Button @click="add" type="primary" icon="md-add">添加</Button>
                        <Button @click="editAll" type="primary">批量修改</Button>
                        <Button @click="handleSearch" icon="md-refresh">刷新</Button>
                    </Row>
                    <Row>
                        <Alert show-icon>
                            已选择 <span class="select-count">{{selectCount}}</span> 项
                            <a class="select-clear" @click="clearSelectAll">清空</a>
                        </Alert>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom"
                               ref="table" @on-selection-change="changeSelect">
                            <template slot-scope="{ row }" slot="roleType">
                                <div v-if="row.roleType  === 'newCar'">
                                    <Tag size="default">[新车]角色</Tag>
                                </div>
                                <div v-if="row.roleType  === 'oldCar'">
                                    <Tag size="default">[二手车]角色</Tag>
                                </div>
                                <div v-if="row.roleType  === 'newCaroldCar'">
                                    <Tag size="default">[新车][二手车]角色</Tag>
                                </div>
                            </template>
                            <template slot-scope="{ row }" slot="action">
                                <Button type="primary" size="small" @click="edit(row)">编辑</Button>
                                <Button type="error" size="small" @click="remove(row)">删除</Button>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="pageNumber" :total="total" :page-size="pageSize" @on-change="changePage"
                              @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total
                              show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal :title="modalTitle" v-model="roleTypeModalVisible" :mask-closable='false' :width="500"
               :styles="{top: '90px'}">
            <Form ref="roleTypeForm" :model="roleTypeForm" :label-width="80">
                <FormItem v-if="modalType===0" label="角色清单" prop="roleIds">
                    <Select multiple v-model="roleTypeForm.roleIds" @on-change="perChange" :label-in-value="true">
                        <Option v-for="item in basicRole" :value="item.id"
                                :key="item.id">{{ item.roleName }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem v-if="modalType===1" label="角色清单" prop="roleIds">
                    <Select disabled multiple v-model="roleTypeForm.roleIds" @on-change="perChange"
                            :label-in-value="true">
                        <Option v-for="item in nowRole" :value="item.roleId"
                                :key="item.roleId">{{ item.roleName }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="角色类别" prop="roleTypes">
                    <Select multiple v-model="roleTypeForm.roleTypes">
                        <Option value="newCar">新车</Option>
                        <Option value="oldCar">二手车</Option>
                    </Select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelRole">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="submitRole">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {
        getRoleTypeData,
        deleteRoleType,
        save,
        resetRole,
        getAllRole
    } from "@/projects/afs-channel/api/admin/roleType";
    import {
        getAllRoleList,
    } from "@/projects/basic/api/admin/role";
    import circleLoading from "_c/circle-loading/circle-loading.vue";

    export default {
        name: "tenant-mana",
        components: {
            circleLoading
        },
        data() {
            return {
                // 查询的角色列表信息
                basicRole:[],
                // 最新版的角色信息
                nowRole:[],
                // 要使用的数据集合
                useRole:[],


                loading: true,
                modalType: 0,
                roleTypeModalVisible: false,
                modalTitle: "",
                locationData: [],
                roleData: [],
                selectList: [],
                types: [],
                selectCount: 0,
                typeFormValidate: {
                    roleIds: [{required: true, message: "名称不能为空", trigger: "blur"}],
                    roleTypes: [{required: true, message: "类别不能为空", trigger: "blur"}]
                },
                roleTypeForm: {
                    roleTypes: "",
                    roleIds: "",
                    flag: 0,
                },
                submitLoading: false,
                columns: [
                    {
                        type: "selection",
                        maxWidth: 60,
                        align: "center",
                        fixed: 'left'
                    },
                    {
                        title: "中文名称",
                        key: "roleName",
                        align: "center"
                    },
                    {
                        title: "角色类别",
                        key: "roleType",
                        align: "center",
                        slot: "roleType"
                    },

                    {
                        title: "操作",
                        key: "action",
                        align: "center",
                        fixed: "left",
                        slot: "action"
                    }
                ],
                data: [],
                pageNumber: 1,
                pageSize: 10,
                total: 0
            };
        },
        methods: {
            init() {
                // this.getRoleTypeList();
                // this.getRoleList();
                this.getRole();
            },
             // 查询所有现有的角色
            getRole() {
                let data = [];
                getAllRoleList().then(res => {
                    if (res.code === "0000") {
                        this.basicRole =res.data;
                        this.resetRole(res.data);
                    }
                });
            },
            // 通过现有的角色信息去更新渠道库里角色类型信息
            resetRole(roles) {
                let data={
                    roles:roles
                }
                resetRole(data).then(res => {
                    if (res.code === "0000") {
                        // 查询 信息列表
                        this.getRoleTypeList();
                    }
                });
            },
            // 查询 信息列表
             getRoleTypeList() {
                this.loading = true;
                let params = {
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize,
                };
                getRoleTypeData(params).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                        this.getAllRole();
                    }
                });
            },
            // 获取现在所有的角色信息
            getAllRole() {
                getAllRole().then(res => {
                    if (res.code === "0000") {
                        this.nowRole =res.data;
                        this.getRoleListData();
                    }
                });    
            },
           // 处理要使用的集合数据
            getRoleListData() {
                // 先把所有的角色信息赋值给要使用的集合信息
                if(this.nowRole.length>0){
                    this.nowRole.forEach(e => {
                        for (let i = 0; i < this.basicRole.length; i++) {
                            if (e.roleId === this.basicRole[i].id) {
                                this.$delete(this.basicRole, i);
                            }
                        }
                    })
                }
            },
            handleSearch() {
                this.getRole();
                this.clearSelectAll();
            },
            changePage(v) {
                this.pageNumber = v;
                this.getRoleTypeList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.pageSize = v;
                this.getRoleTypeList();
            },
           
            cancelRole() {
                this.roleTypeModalVisible = false;
                this.$refs.roleTypeForm.resetFields();
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            changeSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            editAll() {
                if (this.selectCount <= 0) {
                    this.$Message.warning("您还未选择要修改的数据");
                    return;
                }
                this.modalType = 1;
                this.modalTitle = "编辑角色类别";
                this.$Modal.confirm({
                    title: "确认修改",
                    content: "您确认要修改所选的 " + this.selectCount + " 条数据?",
                    onOk: () => {
                        let ids = [];
                        this.selectList.forEach(function (e) {
                            ids.push(e.roleId);
                        });
                        this.roleTypeForm.roleIds = ids;
                        this.roleTypeModalVisible = true;
                    }
                });
            },
            perChange(e) {
                let types = [];
                e.forEach(e => {
                    types.push(e.label);
                })
                this.roleTypeForm.roleNames = types;
            },
            submitRole() {
                this.$refs.roleTypeForm.validate(valid => {
                    if (valid) {
                        if (this.modalType === 0) {
                            this.submitLoading = true;
                            save(this.roleTypeForm).then(res => {
                                this.submitLoading = false;
                                if (res.code === "0000") {
                                    this.roleTypeForm.roleIds.forEach(e => {
                                        for (let i = 0; i < this.basicRole.length; i++) {
                                            if (e == this.basicRole[i].id) {
                                                this.$delete(this.basicRole, i);
                                            }
                                        }
                                    })
                                    this.$Message.success("操作成功");
                                    this.getRoleTypeList();
                                    this.roleTypeModalVisible = false;
                                    this.clearSelectAll();
                                }
                            }).catch(() => {
                                this.submitLoading = false;
                                this.loading = false;
                                this.getRoleTypeList();
                            });
                        } else {
                            // 编辑
                            this.submitLoading = true;
                            this.roleTypeForm.flag = 1;
                            save(this.roleTypeForm).then(res => {
                                this.submitLoading = false;
                                if (res.code === "0000") {
                                    this.$Message.success("操作成功");
                                    this.getRoleTypeList();
                                    this.roleTypeModalVisible = false;
                                    this.clearSelectAll();
                                }
                            }).catch(() => {
                                this.submitLoading = false;
                                this.loading = false;
                                this.getRoleTypeList();
                            });
                        }
                    }
                });
            },
            add() {
                if(this.basicRole.length<=0){
                    this.$Message.warning("暂无角色添加");
                    return;
                }
                this.modalType = 0;
                this.modalTitle = "添加角色类别";
                this.roleTypeForm.roleIds = '';
                this.roleTypeForm.roleTypes = '';
                // this.getRoleListData();
                this.roleTypeModalVisible = true;
            },
            edit(v) {
                this.modalType = 1;
                this.modalTitle = "编辑角色类别";
                let ids = [];
                ids = v.roleId.split(',');
                this.roleTypeForm.roleIds = ids;
                let type = [];
                if ('newCaroldCar' == v.roleType) {
                    type.push('newCar');
                    type.push('oldCar');
                    this.roleTypeForm.roleTypes = type;
                } else {
                    this.roleTypeForm.roleTypes = v.roleType;
                }
                this.roleTypeModalVisible = true;
            },
            remove(v) {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除角色 " + v.roleName + "的类别 ?",
                    onOk: () => {
                        this.operationLoading = true;
                        deleteRoleType(v.roleId).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                this.getRoleTypeList();
                            }
                        });
                    }
                });
                this.getRole();
            }
        },
        mounted() {
            this.init();
        }
    };
</script>
